<template>
	<view class="content">

		<Loading class="loading-box" v-show="!isLoading" :isStatus='loadStatus'></Loading>
		<view class="" v-if="isLoading">
			<view class="bg-head" >
				<image class="bgImg" :src="info.desc_logo" mode=""></image>
				<view class="head-tab " :style="[{height:CustomBar + 'px'}]">
					<view class="view flex align-center" :style="style">
						<view class="back cuIcon-back  middle" @tap="back">

						</view>
					</view>
				</view>
				<view class="title-box   flex ">
					<view class="left">
						<image :src="info.area_logo" class="round " mode=""></image>
					</view>
					<view class="right flex flex-wrap   padding-left-sm">
						<text class="basis-xll  first-child">{{info.area_name}}</text>
					</view>
				</view>
			</view>

			<view class="list">
				<view class="taber grid col-3 bg-white">
					<view class="middle item flex-direction " v-for="(item,index) in taber" :key="index"
						@click="changeTab(index)" :class="tabIndex==index?'hover':'nohover'">
						{{item.name}}
						<view class="numbere-box" v-if="item.num">
							{{item.num}}
						</view>
						<view class="line">

						</view>
					</view>
				</view>

				<scroll-view scroll-y="true" class="list-scroll-view padding">
					<wxParse :content="info.desc" ></wxParse>

				</scroll-view>


			</view>
		</view>
	</view>
</template>

<script>
	import wxParse from "@/components/gaoyia-parse/parse.vue"
	export default {
		components: {
			wxParse
		},
		data() {
			return {
				title: "云课堂",
				tabIndex: 0,
				res: this.apiHost + "/static/otherApp/",
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				isLoading:false,
				loadStatus:'load',
				info: null,
				taber: [{
					name: "简介",
					path: "/pages/cloudClassroom/zhibo"
				}]


			}
		},
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			}
		},
		onLoad() {
			this.getJianjie();
		},
		methods: {

			getJianjie() {
				this.apiRequest('/buyer/areaInfo', {
					area_id: uni.getStorageSync("area_id")
				}, 0).then(res => {
					uni.hideLoading();
					this.isLoading = true;
					if (res.code == 200) {
						this.info=res.data;
					} else {
						uni.showModal({
							title: "温馨提示",
							content: res.msg,
							showCancel: false,
							success: (e) => {
								if (e.confirm) {
									uni.navigateTo({
										url: '/pages/basic/position'
									})
								}
							}
						})
					}
				}, e => {
					uni.hideLoading();
					if (this.isLoading) {
						uni.showModal({
							content: "网络出错啦，请稍后再试",
							showCancel: false,
							success: () => {
								uni.stopPullDownRefresh();
							}
						})
					}
					this.loadStatus = "disconnection";
				});
				

			},

			back() {
				uni.navigateBack({
					delta: 1
				})
			},

			changeTab(i) {
				this.tabIndex = i;
			},
			/**
			 * 
			 */
			jumpTo(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		$w: calc(100vw*(670/750));
		overflow: hidden;
		width: 100vw;
		height: 100vh;

		.bg-head {
			width: 100vw;
			height: calc(100vw*(360/750));
			position: relative;
			background-color: rgba(0, 0, 0, 0.5);
			position: relative;
			.bgImg{
				width: inherit;
				height: inherit;
				position: absolute;
				top: 0;
				z-index: 0;
				
			}


			.title-box {
				z-index: 1;
				width: 100vw;
				position: absolute;
				bottom: 50rpx;
				padding: 0 40rpx;

				.left {
					image {
						width: calc(100vw*(120/750));
						height: calc(100vw*(120/750));
					}

				}

				.right {
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					align-content: center;

					.first-child {
						margin-bottom: 20rpx;
						font-size: 40rpx;
						font-weight: bold;
						color: #FFFFFF;
					}

				}


			}

			.head-tab {
				width: 100vw;
				z-index: 99;
				position: absolute;
				top: 0;

				.view {
					.cuIcon-back {
						height: inherit;
						margin-left: calc(100vw*(40/750));
						font-size: calc(100vw*(40/750));
						margin-top: 6rpx;
						color: white;


					}

					height: inherit;


				}






			}
		}


		.list {
			width: 100vw;

			.taber {
				width: 100vw;

				.item {
					height: calc(100vw*(100/750));
					font-size: 32rpx;
					position: relative;
					font-family: PingFang SC;

					.numbere-box {
						position: absolute;
						right: 40rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;

					}

				}

				.hover {
					font-weight: 800;
					color: #1270E0;
					position: relative;

					.line {
						width: calc(100vw*(40/750));
						display: block;
						height: 6rpx;
						background: #1270E0;
						border-radius: 3rpx;
						position: absolute;
						bottom: 10rpx;

					}
				}

				.nohover {
					font-weight: 500;
					color: #999999;

					.line {
						display: none;
					}
				}


			}

			.list-scroll-view {

				height: calc(100vh*(520/750));
			}
		}

	}
</style>
